<template>
  <div class="container">
    <div class="page-title">
      <div class="sub-left">
        <h3>服务管理</h3>
      </div>
      <div class="sub-right">
        <condition-search v-model="conditionInput" @enter-search="enterSearchAction" placeholder="搜索服务名" :styleObject="styleObject"></condition-search>
        <i class="iconfont icon-plus" @click="addService()">添加服务</i>
      </div>
    </div>
    <div class="page-select">
      <Select v-model="environmentId" @on-change="environmentChange()" placeholder="选择环境">
          <Option v-for="item in environmentInfo" :value="item.environmentId" :key="item.environmentId">{{ item.environmentName }}</Option>
      </Select>
    </div>
    <Table stripe :columns="columns" :data="tableInfo"></Table>

     <!-- 添加服务 -->
    <modal-confirm class="zlst-modal zlst-modal-delivery" title="添加环境" :showModal="showModal" modalWidth="650"  @on-ok-modal="okModal" @on-cancel-modal="cancelModal">
      <Form ref="typeFormValidate" :model="typeFormValidate" :rules="typeRuleValidate" :label-width="200" label-position="left">
        <Form-item label="名称:" fullField="名称" prop="serviceName">
          <Input placeholder="请输入名称"  v-model="typeFormValidate.serviceName" class="ivu-form-item-width"></Input>
        </Form-item>
      </Form>
    </modal-confirm>
  </div>
</template>

<script>
import Fetch from '@/api/request'

export default {
  data: function () {
    return {
      conditionInput: '',
      styleObject: {
        width: '200px'
      },
      environmentInfo: [],
      environmentId: '',
      tableInfo: [],
      showModal: false,
      typeFormValidate: {
        serviceName: ''
      },
      typeRuleValidate: {
        serviceName: [
          {
            required: true,
            trigger: 'blur'
          }
        ]
      },
      columns: [
        {
          title: '状态',
          key: 'status',
          width: 110
        },
        {
          title: '服务组名称',
          key: 'name',
          width: 200
        },
        {
          title: '所属应用',
          key: '',
          width: 100
        },
        {
          title: '镜像',
          key: ''
        },
        {
          title: '服务数',
          key: 'serviceCount',
          width: 80
        },
        {
          title: '容器数',
          key: 'containerCount',
          width: 80
        },
        {
          title: '单节点服务',
          key: '',
          width: 120
        },
        {
          title: '策略',
          key: '',
          width: 80
        },
        {
          title: '创建时间',
          key: '',
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          width: 300,
          align: 'center',
          fixed: 'right',
          render: (h, params) => {
            return (
              <div>
                <i class="iconfont icon-move-up mlr">升级</i>
                <i class="iconfont icon-edit mlr">编辑</i>
                <i class="iconfont icon-zero mlr">禁用</i>
                <dropdown transfer>
                  <a href="javascript:void(0)">
                      ...
                      <icon type="arrow-down-b"></icon>
                  </a>
                  <dropdown-menu slot="list">
                      <dropdown-item>添加服务组</dropdown-item>
                      <dropdown-item>删除服务组</dropdown-item>
                  </dropdown-menu>
                </dropdown>
              </div>
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 环境列表
    init() {
      Fetch.get({
        url: '/api/service'
      }).then((res) => {
        if (res.environment && res.environment.code === '0') {
          this.environmentInfo = res.environment.data
          this.environmentId = this.environmentInfo[0].environmentId
          this.tableInfo = res.environmentDeatil.data.groups
        } else {
          this.$Message.warning(res.message || '服务器内部错误')
        }
      }).catch((err) => {
        this.$Message.warning(err.message)
      })
    },
    // 点击回车触发的事件
    enterSearchAction: function () {
    },
    // 选择环境
    environmentChange() {
      Fetch.get({
        url: '/api/service',
        params: {environmentId: this.environmentId}
      }).then((res) => {
        this.environmentInfo = res.environment.data
        this.tableInfo = res.environmentDeatil.data.groups
      }).catch((err) => {
        this.$Message.warning(err.message)
      })
    },
    // 添加服务
    addService() {
      this.showModal = true
    },
    okModal() {
      this.$refs.typeFormValidate.validate(valid => {
        if (valid) {
          // Fetch.post({
          //   url: '/api/addEnvironment',
          //   params: { paramsData: this.typeFormValidate }
          // })
          //   .then(res => {
          //     if (res.addEnvironment.code === '0') {
          //       this.showModal = false
          //       this.$Message.success('添加服务成功!')
          //       this.init()
          //     } else {
          //       this.$Message.warning(res.addEnvironment.message)
          //     }
          //   })
          //   .catch(err => {
          //     this.$Message.warning(err.message)
          //   })
        }
      })
    },
    cancelModal() {
      this.showModal = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .page-title {
    height: 40px;
    .sub-left {
      display: inline-block;
    }
    .sub-right {
      display: inline-block;
      float: right;
      margin-right: 40px;
      i {
        padding: 16px;
      }
    }
  }
  .page-select {
    height: 44px;
    background-color: #dadfe8;
    padding: 8px;
    .ivu-select {
      width: 200px;
    }
  }
  .card {
    margin-top: 8px;
    .card-item {
      display: inline-block;
      width: 16.66%;
      height: 128px;
      margin: 8px;
      padding: 8px;
      // box-shadow:0px 0px  10px 0.1px #aaa;
      .card-desc {
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
